<template>
    <div>
        <div id="container" style="width:80vw;height:80vh;"></div>
    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    data() {
        return {
            map: null
        }
    },
    methods: {
        init(){
            AMapLoader.load({
                "key": "98172f8432c9cb8d41ad2ef7c6bf2b28",          // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "1.4.15",                                // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": [],                                      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                "AMapUI": {                                         // 是否加载 AMapUI，缺省不加载
                    "version": '1.1',                               // AMapUI 缺省 1.1
                    "plugins":[],                                   // 需要加载的 AMapUI ui插件
                },
                "Loca":{                                            // 是否加载 Loca， 缺省不加载
                    "version": '1.3.2'                              // Loca 版本，缺省 1.3.2
                },
            }).then((AMap)=>{
                
                this.map = new AMap.Map('container', {
                    zoom:4,                                        //级别
                    center: [116.397428, 39.90923],                 //中心点坐标
                    viewMode:'3D'                                   //使用3D视图
                });
                let marker = new AMap.Marker({
                    position: new AMap.LngLat(121.47, 31.23),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    title: '上海市'
                });
                // 将创建的点标记添加到已有的地图实例：
                this.map.add(marker);
            }).catch(e => {
                console.log(e);
            })
        },
        refresh(){
            // let marker = new AMap.Marker({
            //     position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            //     title: '北京'
            // });
            // // 将创建的点标记添加到已有的地图实例：
            // this.map.add(marker);
        },   
    },
    mounted() {  
        this.init()
        //refresh()
    },
}
</script>